<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        
        #div_left{
            width: 300px;
            height:600px;
            margin-top: 107px;
            position: fixed;
            z-index:10;
            top: 0;
            border: dashed;
        }
        #div_collections,#div_apis,#div_environments,#div_history{
            width:119px ;
            height: 60px;
            line-height: 60px;
            background-color: aqua;
            border:none;
        }
        #div_collections:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_apis:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_environments:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #div_history:hover{
            background-color: rgba(0, 0, 255, 0.694);
            border: none;
        }
        #buttons{
            width:120px ;
            height: 600px;
            line-height: 60px;
            background-color: aqua;
            position:fixed;
        }
        #div_details{
            width: 170px;
            height: 100%;
            float: left;
            overflow: hidden;
            margin-left: 125px;
            margin-top: 0;
            position:fixed;
        }
        img{
            margin-top: 30px;
            margin-left: 30px;
        }
        a{
            text-align: center;
            font-weight:bold;
            text-decoration: none;
        }
        #div_url{
            flex: 1;
            width: 100%;
            padding-left: 320px;
            padding-top: 20px;
            padding-right: 50px;
        }
        #skills{
            width: 90px;
            height: 30px;
            background-color: gainsboro;
            
        }
        #input_url{
            width: 630px;
            height: 26px;
            position:fixed;
        }
        #input_search{
            width: 595px;
            height: 25px;
            margin-left: 100px;
            margin-top:-30px;
            position:fixed;
        }
        #button_send{
            width: 90px;
            height: 40px;
            border:soild;
            font-size:24px;
            background-color: rgb(78, 215, 169);
        }
        #create{
            color: rgb(45, 120, 240);
        }
        a{
            color:black;
            margin-right: 20px;
        }
        #as{
            margin-top: 20px;
            color: rgba(0, 0, 0, 0.688);
            position:relative;
        }
        #file{
        	margin-top: -60px;
        }
        a:hover{
            text-decoration: none;
        }
        #more{
            width: 700px;
            height: 500px;
            margin-left: 300px;
            text-align: center;
            line-height: 400px;
            position:fixed;
        }
        .caidan{
            width: 100px;
            height: 300px;
            margin-top: 30px;
            margin-left: 1250px;
            position:fixed;
        }
        .little_caidan{
        	width:90px;
        	border-top:1px dashed;
        	
        }
        .two{
        	border-bottom:1px dashed;
        }
        #total{
          position: relative;
          z-index:20;
        }
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    position: relative;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

        
</style>

</head>
<body>
    <div id="total">
        <div class="dropdown">
          <button class="dropbtn">File</button>
          <div class="dropdown-content">
            <a href="#">New</a>
                <a href="#">New Tab</a>
                <a href="#">New Runner Tab</a>
                <a href="#">New Windows</a>
                <a href="#">Import..</a>
                <a href="#">Settings</a>
                <a href="#">Close Windows</a>
                <a href="#">Close Tab</a>
                <a href="#">Exit</a>
          </div>
        </div>
        
        <div class="dropdown">
            <button class="dropbtn">Edit</button>
            <div class="dropdown-content">
              <a href="#">Cut</a>
                  <a href="#">Copy</a>
                  <a href="#">Paste</a>
                  <a href="#">Delete</a>
                  <a href="#">Select All</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropbtn">View</button>
            <div class="dropdown-content">
              <a href="#">Full Screen</a>
                  <a href="#">Zoom in</a>
                  <a href="#">Zoom out</a>
                  <a href="#">Reset Zoom</a>
                  <a href="#">Toggle Sidebar</a>
                  <a href="#">Toggle Two-Pane View</a>
                  <a href="#">Next Tab</a>
                  <a href="#">Previous Tab</a>
                  <a href="#">Show Console</a>
                  <a href="#">Developer</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropbtn">Help</button>
            <div class="dropdown-content">
              <a href="#">Check for Updates</a>
                  <a href="#">Hardware Acceleration</a>
                  <a href="#">Documentation</a>
                  <a href="https://gitee.com/">GitHub</a>
                  <a href="#">Twitter</a>
                  <a href="#">Support</a>
            </div>
          </div>
      </div>
    
    <div class="caidan">
            <div class="little_caidan" style="margin-top: -50px;">
                <a href="post.jsp">返回</a>  
            </div>
            <div class="little_caidan" style="margin-top: 5px;">
                <a href="person.jsp">个人中心</a>
            </div>
            <div class="little_caidan" style="margin-top: 5px;">
                <a href="login.jsp">退出</a>
            </div>
            <div class="little_caidan two" style="margin-top: 5px;">
                <a href="register.jsp">设置</a>
            </div>
        </div>
    
    <div id="as">
        <a href="">Home</a>
        <a href="">Workspace</a>
        <select name="" id="">
            
        </select>
        <a href="">Reports</a>
        <a href="">Explpre</a>
        <input type="text" id="input_search" placeholder="Search LittleSeven">
        <div style="width:100px;height:50px;position:absolute;margin-top:-44px">
        	<button style="width: 60px; height: 30px;margin-left:1058px;margin-top:-40px">
            	Search
        	</button>
        </div>
    </div>
    <div style="height:100px;">
        <input style="width: 725px; height: 30px; margin-left: 320px; margin-top: 30px;" placeholder="Request Name">
        <div style="margin-top:-28px">
        <button style="width: 68px; height: 35px;margin-left:1054px;margin-top:-20px">
            Save
        </button></div>
    </div>
    <div id="div_left">
        <div id="buttons">
            <button id="div_collections">
                Collections
            </button><br>
            <button id="div_apis">
                APIs
            </button><br>
            <button id="div_environments">
                Environments
            </button><br>
            <button id="div_history">
                History
            </button><br>
        </div>
        <div id="div_details">
        	<img src="res/img/01.jpg" height="100px" width="60px">
            <br>
            <a id="create" href="">Create Collections</a>
        </div>
    </div>
    <div id="div_url">
        <select id="skills" name="skills">
            <option value="get">GET</option>
            <option value="post">POST</option>
            <option value="put">PUT</option>
            <option value="patch">PATCH</option>
            <option value="delete">DELETE</option>
            <option value="copy">COPY</option>
            <option value="head">HEAD</option>
            <option value="options">OPTIONS</option>
            <option value="link">LINK</option>
            <option value="unlink">UNLINK</option>
            <option value="lock">LOCK</option>
            <option value="unlock">UNLOCK</option>
            <option value="propfind">PROPFIND</option>
            <option value="view">VIEW</option>
        </select>
        <input type="text" id="input_url" name="url" placeholder="Enter request URL">
        <div style="margin-left:735px;margin-top:-27px">
        	<a href="get_baidu02.jsp" id="button_send">
        	Send</a></div>
        
        <script>
        	var send = document.getElementById("button_send");
        	function sendGo(){
        		var url = document.getElementById("input_url").value;
        		
        		send.href = "get_baidu02.jsp"+url+escape(url);
        	}
        </script>

    </div>

    <div id="more">
        暂无更多信息~
    </div>
    
    <script type="text/javascript">

        ! function () {

            function o(w, v, i) {

                return w.getAttribute(v) || i

            }

            function j(i) {

                return document.getElementsByTagName(i)

            }

            function l() {

                var i = j("script"),

                    w = i.length,

                    v = i[w - 1];

                return {

                    l: w,

                    z: o(v, "zIndex", -1),

                    o: o(v, "opacity", 7),

                    c: o(v, "color", "250,0,0"),

                    n: o(v, "count", 150)

                }

            }

            function k() {

                r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            }

            function b() {

                e.clearRect(0, 0, r, n);

                var w = [f].concat(t);

                var x, v, A, B, z, y;

                t.forEach(function (i) {

                    i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);

                    for (v = 0; v < w.length; v++) {

                        x = w[v];

                        if (i !== x && null !== x.x && null !== x.y) {

                            B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;

                            y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.01 * B, i.y -= 0.01 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())

                        }

                    }

                    w.splice(w.indexOf(i), 1)

                }), m(b)

            }

            var u = document.createElement("canvas"),

                s = l(),

                c = "c_n" + s.l,

                e = u.getContext("2d"),

                r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {

                    window.setTimeout(i, 1000 / 45)

                },

                a = Math.random,

                f = {

                    x: null,

                    y: null,

                    max: 100000

                };

            u.id = c;

            u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;

            j("body")[0].appendChild(u);

            k(), window.onresize = k;

            window.onmousemove = function (i) {

                i = i || window.event, f.x = i.clientX, f.y = i.clientY

            }, window.onmouseout = function () {

                f.x = null, f.y = null

            };

            for (var t = [], p = 0; s.n > p; p++) {

                var h = a() * r,

                    g = a() * n,

                    q = 2 * a() - 1,

                    d = 2 * a() - 1;

                t.push({

                    x: h,

                    y: g,

                    xa: q,

                    ya: d,

                    max: 9000

                })

            }

            setTimeout(function () {

                b()

            }, 100)

        }();

    </script>
    
</body>
</html>